:root{--bg-primary: #d4c5b0;--bg-secondary: #e8dcc8;--card-bg: #f5ede0;--morandi-sage: #7a9b76;--morandi-clay: #b88b7a;--morandi-slate: #7a8b9c;--morandi-mauve: #9b7a8b;--morandi-olive: #8b9b7a;--morandi-terracotta: #c17a65;--text-primary: #3d3832;--text-secondary: #6b6158;--text-muted: #8f8579;--shadow-soft: rgba(61, 56, 50, .12);--shadow-medium: rgba(61, 56, 50, .18);--shadow-strong: rgba(61, 56, 50, .25)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);color:var(--text-primary);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;line-height:1.6}.container{width:100%;max-width:800px;position:relative}.screen{display:none;animation:fadeIn .5s ease}.screen.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.card{background:var(--card-bg);border-radius:2rem;padding:3rem;box-shadow:0 12px 40px var(--shadow-medium),0 4px 12px var(--shadow-soft);border:1px solid rgba(255,255,255,.5)}@media(max-width:640px){.card{padding:2rem 1.5rem;border-radius:1.5rem}}.title{font-size:2.5rem;font-weight:700;text-align:center;margin-bottom:.5rem;background:linear-gradient(135deg,var(--morandi-sage),var(--morandi-slate));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{text-align:center;color:var(--text-secondary);font-size:1.125rem;margin-bottom:3rem}.mode-buttons{display:grid;gap:1.5rem}.mode-btn{background:linear-gradient(135deg,#ffffffe6,#ffffffb3);border:2px solid var(--morandi-sage);border-radius:1.5rem;padding:2rem;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;gap:.5rem;text-align:left;box-shadow:0 4px 12px var(--shadow-soft)}.mode-btn:hover{transform:translateY(-4px);box-shadow:0 12px 32px var(--shadow-medium);border-color:var(--morandi-slate);background:linear-gradient(135deg,#fff,#ffffffe6)}.mode-title{font-size:1.5rem;font-weight:600;color:var(--text-primary)}.mode-desc{font-size:1rem;color:var(--text-secondary)}.progress-section{margin-bottom:3rem}.progress-text{text-align:center;font-size:1rem;color:var(--text-secondary);margin-bottom:1rem;font-weight:500}.progress-bar-container{width:100%;height:10px;background:#7a9b7633;border-radius:1rem;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.progress-fill{height:100%;background:linear-gradient(90deg,var(--morandi-sage),var(--morandi-slate));border-radius:1rem;transition:width .4s ease;width:0%;box-shadow:0 2px 8px #7a9b7666}.question-content{display:flex;flex-direction:column;gap:2rem}.question-text{font-size:1.75rem;font-weight:600;text-align:center;color:var(--text-primary);line-height:1.4}@media(max-width:640px){.question-text{font-size:1.375rem}}.options{display:grid;gap:1rem}.option-btn{background:linear-gradient(135deg,#fffffff2,#ffffffd9);border:2px solid var(--morandi-olive);border-radius:1.25rem;padding:1.5rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:1rem;text-align:left;box-shadow:0 2px 8px var(--shadow-soft)}.option-btn:hover{transform:translate(8px);border-color:var(--morandi-slate);box-shadow:0 6px 20px var(--shadow-medium);background:linear-gradient(135deg,#fff,#fffffff2)}.option-btn:active{transform:scale(.98)}.option-letter{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--morandi-sage),var(--morandi-olive));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;flex-shrink:0;color:#fff;box-shadow:0 2px 8px #7a9b764d}.option-text{flex:1;font-size:1.125rem;color:var(--text-primary)}.result-type{font-size:4rem;font-weight:700;text-align:center;margin-bottom:1rem;background:linear-gradient(135deg,var(--morandi-sage),var(--morandi-slate),var(--morandi-mauve));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}@media(max-width:640px){.result-type{font-size:3rem}}.result-description{text-align:center;font-size:1.25rem;color:var(--text-secondary);margin-bottom:3rem;line-height:1.6}.dimensions{display:flex;flex-direction:column;gap:2rem;margin-bottom:3rem}.dimension{display:flex;flex-direction:column;gap:.75rem}.dimension-labels{display:flex;justify-content:space-between;font-size:.875rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.dimension-bar{width:100%;height:14px;background:#7a9b7626;border-radius:1rem;overflow:hidden;position:relative;box-shadow:inset 0 2px 4px #0000001a}.dimension-fill{height:100%;border-radius:1rem;transition:all .8s ease;position:absolute;box-shadow:0 2px 6px #00000026}.dimension-fill[data-side=left]{left:0;background:linear-gradient(90deg,var(--morandi-clay),var(--morandi-terracotta))}.dimension-fill[data-side=right]{right:0;background:linear-gradient(90deg,var(--morandi-slate),var(--morandi-sage))}.dimension-percent{text-align:center;font-size:.875rem;color:var(--text-secondary);font-weight:600}.insights{display:grid;gap:2rem;margin-bottom:3rem}.insight-section{background:#fffc;border-radius:1.25rem;padding:1.75rem;border:2px solid var(--morandi-sage);box-shadow:0 4px 12px var(--shadow-soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.insight-title{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:var(--text-primary)}.insight-list{list-style:none;display:flex;flex-direction:column;gap:.75rem}.insight-list li{padding-left:1.5rem;position:relative;color:var(--text-secondary);line-height:1.5}.insight-list li:before{content:"•";position:absolute;left:0;color:var(--morandi-terracotta);font-weight:700;font-size:1.5rem;line-height:1}.restart-btn{width:100%;background:linear-gradient(135deg,var(--morandi-sage),var(--morandi-slate));color:#fff;border:none;border-radius:1.25rem;padding:1.25rem;font-size:1.125rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-bottom:3rem;box-shadow:0 4px 16px var(--shadow-medium)}.restart-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow-strong);background:linear-gradient(135deg,var(--morandi-olive),var(--morandi-slate))}.restart-btn:active{transform:scale(.98)}.history-section{border-top:2px solid rgba(122,155,118,.3);padding-top:2rem}.history-title{font-size:1.25rem;font-weight:600;margin-bottom:1.5rem;color:var(--text-primary);text-align:center}.history-list{display:flex;flex-direction:column;gap:1rem}.history-item{background:#ffffffb3;border:2px solid var(--morandi-clay);border-radius:1rem;padding:1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;box-shadow:0 2px 8px var(--shadow-soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.history-info{display:flex;flex-direction:column;gap:.25rem}.history-type{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,var(--morandi-sage),var(--morandi-mauve));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.history-meta{font-size:.875rem;color:var(--text-secondary)}.history-percentages{display:flex;gap:.75rem;flex-wrap:wrap;font-size:.75rem;color:var(--text-secondary);font-weight:600}.history-percentage{background:linear-gradient(135deg,#7a9b7633,#7a8b9c33);padding:.35rem .85rem;border-radius:.5rem;border:1px solid rgba(122,155,118,.3)}.history-empty{text-align:center;color:var(--text-secondary);padding:2rem;font-style:italic}@media(max-width:640px){.title{font-size:2rem}.mode-btn{padding:1.5rem}.mode-title{font-size:1.25rem}.history-item{flex-direction:column;align-items:flex-start}}